import React, { Component } from "react";
import Chooser from "components/chooser";
import WrapFormItem from "components/wrap-form-item";
import { Row, Col } from 'antd'

class WarpAccountCode extends Component {

  state = {
    value: {}
  };

  componentDidMount() {
    this.setValues(this.props);
  }

  componentWillReceiveProps(nextProps) {
    this.setValues(nextProps);
  }

  setValues = props => {
    if('value' in props) {
      const value = props.value;
      this.setState({ value: value });
    }
  };

  onChangeValue = targetValue => {
    let { value } = this.state;
    this.setState({ value: Object.assign({}, value, targetValue) }, this.dispatchOnChange);
  };

  onChange = () => {
    const { onChange } = this.props;
    const { value } = this.state;
    onChange && onChange(value);
  };

  dispatchOnChange = () => {
    this.onChange();
  };

  render() {
    const { value } = this.state;
    const { setOfBooksId } = this.props;
    return (
      <WrapFormItem value={value}>
        {(onChange, value) => (
          <Row gutter={10}>
            <Col span={12}>
              <Chooser
                labelKey={'accountCode'}
                valueKey={'accountCode'}
                type={'select_object'}
                single
                listExtraParams={{
                  setOfBooksId
                }}
                value={value.accountCodeFrom}
                onChange={innerValue => {
                  onChange({ accountCodeFrom: innerValue });
                  this.onChangeValue({ accountCodeFrom: innerValue })
                }}
              />
            </Col>
            <Col span={12}>
              <Chooser
                labelKey={'accountCode'}
                valueKey={'accountCode'}
                type={'select_object'}
                single
                listExtraParams={{
                  setOfBooksId
                }}
                value={value.accountCodeTo}
                onChange={innerValue => {
                  onChange({ accountCodeTo: innerValue });
                  this.onChangeValue({ accountCodeFrom: innerValue })
                }}
              />
            </Col>
          </Row>
        )}
      </WrapFormItem>
    )
  }

}

export default WarpAccountCode
